<!DOCTYPE html>
<div ng-repeat="slot in ct.state.player.element_slots track by $index">
  <element-select index="$index" ng-if="!slot"></element-select>
  <div ng-if="slot">
    <h2>{{ct.data.elements[slot.element].name}}</h2>
    <h3>
      <pretty value="ct.elementProduction(ct.state.player, slot)" id="production_total"></pretty>
      {{slot.element}}/秒
    </h3>
    <ul ng-if="ct.state.player.unlocks.isotope">
      <li ng-repeat="(isotope,_) in ct.data.elements[slot.element].isotopes"
          ng-if="ct.state.player.resources[isotope] !== null">
        <get-html value="isotope"></get-html>:
        {{ct.data.elements[slot.element].isotopes[isotope].ratio*100 | number: 4}}%
      </li>
    </ul>
    <h4 ng-if="ct.state.player.unlocks.ion">{{ 'GENERATORS.ELECTRONEG' | translate }}: {{ct.data.elements[slot.element].electronegativity}}</h4>
    <table class="table">
      <tr>
        <td class="col-xs-1">
          {{ 'GENERATORS.GENERATOR' | translate }}
        </td>
        <td class="col-xs-2">
          {{slot.element}}/秒
        </td>
        <td class="col-xs-1">
          {{ 'GENERATORS.NUMBER' | translate }}
        </td>
        <td class="col-xs-3">
          {{ 'GENERATORS.TOTAL' | translate }} {{slot.element}}/s
        </td>
        <td class="col-xs-3">
          {{ 'GENERATORS.PRICE' | translate }}
        </td>
        <td class="col-xs-3">
          {{ 'GENERATORS.BUY' | translate }}
          <button type="button"
                  class="btn btn-default"
                  ng-click="ct.util.nextAmount(ct.state.player, 'buyIndex', ct.buyAmount)">
          <get-html value="ct.buyAmount[ct.state.player.options.buyIndex].toString()"></get-html>
        </button>
        <span ng-if="ct.state.player.dark_upgrades.automation_2">
          Auto: <input type="checkbox" ng-model="ct.state.player.options.autoBuyGenerators">
        </span>
        </td>
      </tr>
      <tr class="animif"
          ng-repeat="gen in ct.visibleGenerators(slot)">
        <td class="animif col-xs-1">
          {{ct.data.generators[gen].name}}
        </td>
        <td class="animif col-xs-2">
          <pretty value="ct.generatorProduction(ct.state.player, gen, slot)"></pretty>
        </td>
        <td class="animif col-xs-1">
          <pretty value="slot.generators[gen]"></pretty>
        </td>
        <td class="animif col-xs-3">
          <pretty value="ct.tierProduction(ct.state.player, gen, slot)"></pretty>
        </td>
        <td class="animif col-xs-3">
          <pretty value="ct.generatorTotalPrice(ct.state.player, gen, slot, ct.buyAmount[ct.state.player.options.buyIndex])"></pretty>
          &nbsp;
          <get-html value="ct.data.elements[slot.element].main"></get-html>
        </td>
        <td class="animif col-xs-3">
          <div class="pull-left">
            <!-- FIXME splitting the buttons in two seems like the easiest solution
         but I'm open to suggestions -->
            <button ng-if="ct.buyAmount[ct.state.player.options.buyIndex] !== 'max'"
                    type="button"
                    class="btn btn-default"
                    ng-click="ct.buyGenerators(ct.state.player, gen, slot, ct.buyAmount[ct.state.player.options.buyIndex])"
                    ng-class="{disabled: !ct.canBuy(ct.state.player, slot, ct.generatorTotalPrice(ct.state.player, gen, slot, ct.buyAmount[ct.state.player.options.buyIndex]))}">
          <get-html value="ct.buyAmount[ct.state.player.options.buyIndex].toString()"></get-html>
        </button>
            <button ng-if="ct.buyAmount[ct.state.player.options.buyIndex] === 'max'"
                    type="button"
                    class="btn btn-default"
                    ng-click="ct.buyGenerators(ct.state.player, gen, slot, ct.buyAmount[ct.state.player.options.buyIndex])">
          <get-html value="ct.maxCanBuy(ct.state.player, gen, slot).toString()"></get-html>
        </button>
          </div>
        </td>
      </tr>
    </table>
  </div>
</div>
